<template>
  <div>
    <div class="header">
      <div class="w">
        <!-- 导航链接 -->
        <div class="navbar">
          <router-link :key="item.path" v-for="item in navBar.navList" :to="item.path">{{item.name}}</router-link>
        </div>
        <!-- 导航工具 -->
        <div class="navtools">
          <div v-if="$store.state.isLogin != true">
              <router-link
                :key="item.path"
                v-for="item in navBar.navTools"
                :to="item.path"
                >{{item.name}}</router-link>
          </div>
          <!-- 用户下拉菜单 -->
          <el-dropdown @command="handleCommand" v-if="$store.state.isLogin">
            <span class="el-dropdown-link">
              <a href="javascript:;" class="iconfont my">&#xe648;</a>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="/my">我的</el-dropdown-item>
              <el-dropdown-item command="/collection">我的收藏</el-dropdown-item>
              <el-dropdown-item command="/publish">发布专辑</el-dropdown-item>
              <el-dropdown-item command="/publish/video">发布视频</el-dropdown-item>
              <el-dropdown-item command="/newPassword">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <a @click="loginOut" v-if="$store.state.isLogin" href="javascript:;">退出登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";
import Vue from "vue";
import axios from "axios";

export default {
  setup(props, context) {
    // axios配置
    axios.defaults.baseURL = "http://47.105.157.158:3000";

    onMounted(() => {
      getNavBar();
      reloadIsLogin();
    })

    // 刷新后，重新获取用户信息，避免刷新后共享数据丢失的BUG
    const reloadIsLogin = async function () {
      // 不在登录状态，就不发请求获取
      if (!window.localStorage.getItem('token'))
        return false;

      // 发送请求获取用户信息
      let token = window.localStorage.getItem('token');
      let { data: res } = await axios.get(`/user/login/${token}`);
      if (res.status != 200)
        return context.parent.$message.error('获取用户信息失败，请重新登录');
      
      // 重新设置数据给store共享
      context.parent.$store.commit('setIsLogin', true);
      context.parent.$store.commit('setUser', res.user);
      context.parent.$store.commit('setToken', token);

    }

    // 头部导航
    const navBar = ref([]);
    // 获取头部导航
    const getNavBar = async function() {
      let { data: res } = await axios.get("/get/navbar");
      if (res.status != 200)
        return context.parent.$message.error("获取头部导航失败，请刷新后重试");
      navBar.value = res.navs;
    };

    // 退出登录
    const loginOut = function() {
      context.parent.$message.success('退出登录成功');
      setTimeout(() => {
        location.reload();
        window.localStorage.clear();
        context.parent.$store.commit('clearParams');
      }, 2000);
    }

    // 个人中心
    const handleCommand = function (command) {
      context.parent.$router.push(command);
    }

    // 方法
    const methods = { reloadIsLogin, loginOut, handleCommand };

    return { navBar, ...methods };
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 60px;
  line-height: 60px;
  background-color: #000;
}

a {
  color: #999;
  font-size: 14px;
  font-weight: 700;
  margin: 0 12px;
  &:hover {
    color: #fff;
  }
}

.navbar {
  text-align: center;
}

.navtools {
  position: absolute;
  right: 0;
  top: 0;
}

.my {
  font-size: 18px;
}
</style>